<template>
	<ul>
		<li>
			<ynet-button @click="showPopUp(0)">Fade</ynet-button>
			<ynet-popup v-model="isPopupShow[0]" transition="ynet-fade">
				<div class="example-popup example-popup-center">Fade</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(1)">fade-up</ynet-button>
			<ynet-popup v-model="isPopupShow[1]" transition="ynet-fade-up">
				<div class="example-popup example-popup-center">fade-up</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(2)">fade-down</ynet-button>
			<ynet-popup v-model="isPopupShow[2]" transition="ynet-fade-down">
				<div class="example-popup example-popup-center">fade-down</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(3)">fade-left</ynet-button>
			<ynet-popup v-model="isPopupShow[3]" transition="ynet-fade-left">
				<div class="example-popup example-popup-center">fade-left</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(4)">fade-right</ynet-button>
			<ynet-popup v-model="isPopupShow[4]" transition="ynet-fade-right">
				<div class="example-popup example-popup-center">fade-right</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(5)">Bounce</ynet-button>
			<ynet-popup v-model="isPopupShow[5]" transition="ynet-bounce">
				<div class="example-popup example-popup-center">Bounce</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(6)">Punch</ynet-button>
			<ynet-popup v-model="isPopupShow[6]" transition="ynet-punch">
				<div class="example-popup example-popup-center">Punch</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(7)">Zoom</ynet-button>
			<ynet-popup v-model="isPopupShow[7]" transition="ynet-zoom">
				<div class="example-popup example-popup-center">Zoom</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(8)">Slide Up</ynet-button>
			<ynet-popup v-model="isPopupShow[8]" transition="ynet-slide-up">
				<div class="example-popup example-popup-center">Slide Up</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(9)">Slide Down</ynet-button>
			<ynet-popup v-model="isPopupShow[9]" transition="ynet-slide-down">
				<div class="example-popup example-popup-center">Slide Down</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(10)">Slide Left</ynet-button>
			<ynet-popup v-model="isPopupShow[10]" transition="ynet-slide-left">
				<div class="example-popup example-popup-center">Slide Left</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp(11)">Slide Right</ynet-button>
			<ynet-popup v-model="isPopupShow[11]" transition="ynet-slide-right">
				<div class="example-popup example-popup-center">Slide Right</div>
			</ynet-popup>
		</li>
	</ul>
</template>
<script>
	import {Popup, Button} from 'ynet-mobile'
	export default {
		title: '动画',
		name: 'transition-demo',
		components: {
			[Popup.name]: Popup,
			[Button.name]: Button
		},
		data(){
			return {
				isPopupShow: []
			}
		},
		methods: {
			showPopUp(type){
				 this.$set(this.isPopupShow, type, true)
			}
		}
	}
</script>
<style lang="scss">
	.example-popup{
		position: relative;
		font-size: 28px;
		font-weight: 500;
		box-sizing: border-box;
		text-align: center;
		background-color: #FFF;
	}
	.example-popup-center{
		padding: 50px;
		border-radius: 10px
	}
</style>